<script lang="ts" setup>
import { computed, defineAsyncComponent } from 'vue'
import { useDepositRefundStore } from '@/store/modules/depositRefund'
const depositRefundTable = defineAsyncComponent(
  () => import('@/components/table/DepositRefundTable.vue')
)
const refundStore = useDepositRefundStore()
const activeName = computed(() => refundStore.currentOuterTab)
// const innerActiveName = computed(() => refundStore.currentInnerTab)
const pagination = computed(() => refundStore.pagination)
const handleTabChange = () => {
  refundStore.refreshTable()
}
const handlePageChange = (page: number) => {
  refundStore.handleCurrentChange(page)
}

const handleSizeChange = (size: number) => {
  refundStore.handleSizeChange(size)
}
const emits = defineEmits(['show-info', 'resubmit'])
const emitOpen = (orderId: string, userId: string) => {
  emits('show-info', orderId, userId)
}
const emitResubmit = (
  phone: string,
  orderId: string,
  orderType: string,
  userId: number,
  applyAmount: number
) => {
  emits('resubmit', phone, orderId, orderType, userId, applyAmount)
}
</script>

<template>
  <el-tabs v-model="activeName">
    <el-tab-pane name="long" label="长租押金退款">
      <el-tabs
        v-model="refundStore.currentInnerTab"
        @tab-change="handleTabChange"
        type="border-card"
      >
        <el-tab-pane name="all" label="全部">
          <deposit-refund-table @show-info="emitOpen" @resubmit="emitResubmit" />
        </el-tab-pane>
        <el-tab-pane name="underreview" label="审核中">
          <deposit-refund-table @show-info="emitOpen" @resubmit="emitResubmit" />
        </el-tab-pane>
        <el-tab-pane name="refund" label="待退款">
          <deposit-refund-table @show-info="emitOpen" @resubmit="emitResubmit" />
        </el-tab-pane>
        <el-tab-pane name="refunded" label="已退款">
          <deposit-refund-table @show-info="emitOpen" @resubmit="emitResubmit" />
        </el-tab-pane>
        <el-tab-pane name="overrule" label="被驳回">
          <deposit-refund-table @show-info="emitOpen" @resubmit="emitResubmit" />
        </el-tab-pane>
      </el-tabs>
    </el-tab-pane>
  </el-tabs>
  <div flex justify-end mt-20>
    <el-pagination
      @current-change="handlePageChange"
      @size-change="handleSizeChange"
      v-model:current-page="pagination.pageNum"
      v-model:page-size="pagination.pageSize"
      background
      :total="pagination.total"
      layout="total,prev,pager,next,jumper,sizes"
    />
  </div>
</template>

<style scoped></style>
